<template>
  <div>
    <div :style="'height:'+btnBoxHeight+'px;'" class="btnBox">
      <slot name="head"/>
    </div>
    <div :style="'height: calc(100vh - '+(180+btnBoxHeight)+'px);'" class="main">
      <slot name="body"/>
    </div>
  </div>
</template>

<script>
export default {
  name: "Suspension",
  components: {},
  props: {
    btnBoxHeight: {
      type: Number,
      default: 30
    }
  },
  data() {
    return {}
  },
  mounted() {

  },
  methods: {}
}
</script>

<style lang="less" scoped>
.btnBox {
  margin-bottom: 20px;
}

.main {
  overflow-y: auto;;
}

.main::-webkit-scrollbar {
  width: 4px;
  /*height: 4px;*/
}

.main::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}

.main::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);

}
</style>
